<include file="__THEME__/header" />
<link href="../Public/account.css" rel="stylesheet" type="text/css" />
<link href="../Public/js/setavatar/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/js/jquery.form.js"></script>
<script type="text/javascript" src="../Public/js/avatar/avatar.js"></script>
<script type="text/javascript" src="../Public/js/account.js"></script>
<script type="text/javascript" src="../Public/js/setavatar/jquery.imgareaselect.min.js"></script>
<div class="content_holder">
<div class="content"><!-- 内容 begin  --> 
  <div class="main no_l"><!-- 右侧内容 begin  -->
    <div class="mainbox">
      <div class="mainbox_appC no_r">
    <include file="_tab" />
    <!-- 切换标签 end  -->
    <div class="mainbox_C_C">
    <div class="mainbox_R">
    <div class="right_box">
    完善您的个人资料以便您的朋友快速的找到您！！
    </div>
    </div>
		<div class="setupBox">
          <div class="setItems">
            <div class="setFold setUnfold" rel="base" >
              <h2>基本资料</h2>
              <div class="setStep"> <span class="txt1">用户基本信息</span></div>
            </div>
            <div style="display: block;" class="setItemsInfo">
		      <div class="data">
              <!-- 基本资料 begin  -->
		          <form action="{:U('home/Account/update')}" method="post" dotype="ajax" class="form_validator" type="base" id="regform" oncomplete="false">
			        <input type="hidden" name="dotype" value="upbase">
		            <dl class="set_basic">
		                <dd>
		                    <label>昵称：</label>
		                    <div class="left">
		                      <div class="left mr5"><input name="nickname" maxLength="110" type="text" class="text" value="{$userInfo.detail.uname}" /><br />
		                      2-10位个中英文、数字、下划线和中划线<br />
		                      修改昵称会造成已发布微博中@你的昵称失效
		                      </div>
		                    </div>
		                </dd>
		                <dd>
		                    <label>所在地区：</label>
		                    <div class="left">
							      <script>ui.getarea('area','',{$userInfo.detail.province},{$userInfo.detail.city});</script>
		                    </div>
		                </dd>
						
		                <dd>
		                    <label>性别：</label>
                            <div class="left">
		                        <label><input name="sex" type="radio" value="1" <eq name="userInfo.detail.sex" value="1">checked='true'</eq> /> 男</label> &nbsp;&nbsp;&nbsp;
		                        <label><input name="sex" type="radio" value="0" <eq name="userInfo.detail.sex" value="0">checked='true'</eq>  dataType="Group"  msg="必须选定一个性别" /> 女</label>
		                    </div>
						</dd>
		          </dl>
				  {:Addons::hook('home_account_profile_base')}
		          <dl class="set_basic"><dd><label>&nbsp;</label><input type="submit" class="btn_b" value="保存" /></dd></dl>
		          </form>
		        </div>
                <!-- 基本资料 end  -->
            </div>
          </div>
		  <div class="setItems">
            <div class="setFold" rel="tags">
              <h2>个人标签</h2>
              <div class="setStep"> <span class="txt1">添加描述自己职业、兴趣爱好等方面的词语，让更多人找到你，让你找到更多同类</span></div>
            </div>
            <div class="setItemsInfo"> 
				<div class="setupTag_box">
                	<div class="setupTag_boxL">
                            	<input type="text" id="tag_input" class="text mr5 left"  maxlength="110" style=" width:170px">
                                <a class="btn_b" href="javascript:void(0);" id="add_tag" onclick="doUserTag()"><em>保存</em></a>
                <div class="mt10 cGray2">选择最适合你的词语，多个标签用'逗号'格开.如 thinksns,web</div></div>
                    <div class="setupTag_boxR">
                    	<p>你可能感兴趣的标签(点击直接添加) ：</p>
                        <div id="rec_tags" class="setupTag_list01">
                        <volist id="vo" name="userFavTag">
                        	<a href="javascript:;" onclick="addTagById({$vo.tag_id})" title="添加标签"><em>+</em>{$vo.tag_name}</a>
						</volist>
                       </div>
                       </div>
                    </div>
                    
                 <div class="lineS_top pt10 cGray2">我已经添加的标签</div>
                 <div class="setupTag_list02" id="mytagshow2">
                    <ul id="tag_list" class="tagList">
						<volist id="vo" name="userTag">
							<li><a class="a1" href="{:U('home/user/searchtag',array('k'=>$vo['tag_name']))}">{$vo.tag_name}</a><a class="a2" onclick="deleteTag(this)" tagid="{$vo.user_tag_id}" href="javascript:;"><img class="del" src="__THEME__/images/zw_img.gif" /></a></li>
						</volist>
					</ul>
                    <div class="clear"></div>
                    </div>
                </div>
			</div>
          <div class="setItems">
            <div class="setFold" rel="intro">
              <h2>个人情况</h2>
              <div class="setStep"> <span class="txt1">个人详情，将出现在个人空间详细资料里</span></div>
            </div>
            <div style="display:none;"  class="setItemsInfo"> 
				 <div class="data">
                 <!-- 个人情况 begin  -->
					<form action="{:U('home/Account/update')}" method="post" dotype="ajax" class="form_validator" type="intro" >
					<input type="hidden" name="dotype" value="upintro">
					    <dl class="set_basic">
					        <volist name="userInfo.intro.list" id="vo">
					            <dd>
						          <label>{$vo.name}：</label>
                                  <div class="left">
						            <input type="text"  class="text" style="width:400px;" onfocus="this.className='text2'" onblur="this.className='text'"  name="intro[{$vo.field}]" value="{$vo.value}"/>
						          </div>
					            </dd>
					        </volist>
						</dl>
						{:Addons::hook('home_account_profile_intro')}
						<dl class="set_basic">
					        <dd><label>&nbsp;</label><input type="submit" class="btn_b" value="保存" /></dd>
						</dl>					
					</form>
				</div>
                <!-- 个人情况 end  -->
			</div>
          </div>
		  
          <div class="setItems">
            <div class="setFold" rel="contact" >
              <h2>联系方式</h2>
              <div class="setStep"> <span class="txt1">补充联系方式，更方便你的朋友联系上你</span></div>
            </div>
            <div style="display:none;"  class="setItemsInfo"> 
				 <div class="data">
                 <!-- 联系方式 begin  -->
					<form action="{:U('home/Account/update')}" method="post" dotype="ajax" class="form_validator" type="contact" >
					<input type="hidden" name="dotype" value="upcontact">
					    <dl class="set_basic">
					        <volist name="userInfo.contact.list" id="vo">
					          <dd>
						          <label>{$vo.name}：</label><div class="left">
						            <input type="text" id="old_{$vo['name']}" class="text" style="width:400px;" onfocus="this.className='text2'" onblur="this.className='text'"  name="contact[{$vo.field}]" value="{$vo.value}"/>
						          </div>
					            </dd>
					        </volist>
					</dl>
						{:Addons::hook('home_account_profile_contact')}
							<dl class="set_basic">
					        <dd><label>&nbsp;</label><input type="submit" class="btn_b" value="保存" /></dd>
					</dl>
					
					</form>
				</div>
                <!-- 联系方式 end  -->
			</div>
          </div>

          <div class="setItems">
              <div class="setFold" rel="education" >
              <h2>教育、工作情况</h2>
              <div class="setStep"> <span class="txt1">教育、工作情况</span></div>
            </div>
            <div style="display:none;"  class="setItemsInfo"> 
		        <div class="data">
                <!-- 教育情况 begin  -->
		            <div>
					<ul id="profileList">
						<volist id="vo" name="userInfo.profile.list">
						 	<li id="pro_{$vo.id}">
							<switch name="vo['module']">
								<case value="education">
									<div id="div_action_702" class="projectlist">
										<h3><a href="javascript:profile_del({$vo.id});" class="right"><span class="del"> &nbsp;</span></a>
										[教育]<a   target="_blank">{$vo.school}</a>
										</h3><p>{$vo.year}入学 - {$vo.classes}</p>
									</div>
								</case>
								<case value="career">
									<div id="div_action_702" class="projectlist">
											<h3><a href="javascript:profile_del({$vo.id});" class="right"><span class="del"> &nbsp;</span></a>
											[公司/机构]<a   target="_blank">{$vo.company}</a>
											</h3><p>{$vo.begintime} 至 {$vo.endtime}<br>{$vo.position}</p>
									</div>

								</case>
							</switch>
							</li>
						</volist>
					</ul>
		                <h2 class="lh35  f14px"><strong>添加</strong></h2>
						<form action="{:U('home/account/addproject')}" class="form_validator" method="post" dotype="ajax" callback="addprofile">
						   <ul>
		                        <li>
                    				<div class="left alR lh25" style="width:15%;">类型：</div>
		                            <div class="left" style="width: 85%;">
		                            	<select name="addtype" onchange="changeEduCar(this)">
												<option value="">请选择</option>
												<option value="education">教育</option>
											    <option value="career">公司/机构</option>
											</select>
		                            </div>								
		                        </li>
							</ul>
							<ul id="educarContent">
							</ul>
								</form>
					</div>         
		        </div>
                <!-- 教育情况 end  -->	
			</div>
          </div>
		  <div class="setItems" id="face">
		    
            <div class="setFold" rel="face" >
			<div style="float:left;margin-right:10px;border:1px solid #8098A8;height:30px;padding:1px;width:30px;"><img src="{$mid|getUserFace='s'}" width="30"></div>
              <h2>上传头像</h2>
             <div class="setStep">
			  	<span class="txt1" id="avatarInfo">
				<php>if( isSetAvatar($mid) ){</php>
					已设置头像
				<php>}else{</php>
					未设置头像
				<php>}</php>
				</span>
              </div>
            </div>
            <div style=""  class="setItemsInfo"> 
				<div style="padding:10px 0;color:#666;"> 
				<form enctype="multipart/form-data" class="form_validator" method="post" id="uploadpic" name="upform" dotype="ajax" callback="uploadpic" target="upload_target" action="{:U('home/Account/avatar',array('t'=>'upload'))}">
				<input type="file" name="Filedata" onchange="douploadpic()" id="Filedata"/> 
				<span style="display:none;" id="loading_gif"><img src="../Public/js/avatar/loading.gif" align="absmiddle" />上传中，请稍侯......</span>  
				</form>
				</div> 
                <div class="picSettings">
                	<div id="photo" class="left" style="width:330px; height:330px; border-right:1px solid #E5E5E5">
					</div>
                    <div class="left" style="width:200px; padding-left:15px;">
                    	<div style="width:180px;  margin-bottom:20px; font-size:16px"><strong>头像预览</strong></div>
                        <div class="left" style=" width: 150px; height: 150px; border:1px solid #B4B5AF; overflow:hidden;"><img id="photo_big" src="{$mid|getUserFace='b'}" /></div>
						
                    </div>
					<form enctype="multipart/form-data" class="form_validator" method="post" name="upform" dotype="ajax" callback="dosaveface" target="_blank" action="{:U('home/Account/avatar',array('t'=>'save'))}">
				<input type="hidden" name="picurl">
				<input type="hidden" name="x1">
				<input type="hidden" name="y1">
				<input type="hidden" name="x2">
				<input type="hidden" name="y2">
				<input type="hidden" name="w">
				<input type="hidden" name="h">
				<div style="clear:left; padding-top:20px;"> <input type="submit" class="btn_b" value="保存" />
<input type="button" class="btn_w" value="取消" onclick="unSetFace()" /></div>
				</form>
                    
                </div>
			</div>
          </div>
          {:Addons::hook('home_account_profile_bottom')}
          <div class="c"></div>
        </div>
      </div>
      </div>
    </div>
  </div>
  <!-- 右侧内容 end  -->
  <div class="c"></div>
</div>
</div>
<!-- 内容 end --> 
<include file="__THEME__/footer" />

<script>
	$(document).ready(function(){
		var hs = document.location.hash;
		var up_pic_width =50;
		var up_pic_height =50;
		
		changeModel( hs.replace('#','') );
		$('.setFold').click(function(){
			if( $(this).attr('class')=='setFold' ){
				changeModel( $(this).attr('rel') );
			}else{
				$(this).removeClass('setUnfold');
				$(this).next('.setItemsInfo').hide();
			}
			location.href='#'+$(this).attr('rel');
		})
		
		//监听 form 表单提交
	  	$(".form_validator").bind('submit', function() {
			var callbackfun = $(this).attr('callback');
			var type   = $(this).attr('type');
			var options = {
			    success: function(txt) {
			    	txt = eval("("+txt+")");
					if(callbackfun){
						callback(eval(callbackfun),txt);
					}else{
						  if(txt.boolen){
							  ui.success( txt.message );
						  }else{
							  ui.error( txt.message );
						  }
						  	 
					}
			    }
			};		
	         $(this).ajaxSubmit(options);
			 return false;
	    });
	
	});
	
	function callback(fun,argum){
		fun(argum);
	}
	
	function dosaveface(txt){
		if (txt=='-1') {
			ui.error('更新失败');
		}else {
			alert('更新成功');
	        location.reload();
		}
	}
	
	function douploadpic(){
		$('#loading_gif').show();
		$('input[name="Filedata"]').hide();
		var options = {
			    success: function(txt) {
					uploadpic(txt);
			    }
		};		
		$('#uploadpic').ajaxSubmit(options);
	    return false;		
	}
	var imgrs;
	function uploadpic(txt){
		txt = eval('('+txt+')');
		if(txt.code==1){
			var tmpDate = new Date(); 
			set_UP_W_H(txt.data['picwidth'],txt.data['picheight']);
			var defautlv = ( txt.data['picwidth'] > txt.data['picheight']) ?txt.data['picheight']:txt.data['picwidth'];
	//		$("#photo").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
			$("#photo").html("<img id='photo_img' src="+txt.data['picurl']+'?t='+ tmpDate.getTime()+">");
			$("input[name=picurl]").attr('value',txt.data['picurl']);
		 	$("#photo_big").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
		
		 	imgrs = $('#photo_img').imgAreaSelect({ 
						x1: 0, 
						y1: 0,
					    x2: 100, 
						y2: 100, 
						handles: true,
						onInit:preview,
						onSelectChange:preview,
						onSelectEnd:onSelectEnd,
						aspectRatio: '1:1',
						instance: true,
						parent:$('#photo')
						});
			$('#loading_gif').hide();
		 }else{
		 	alert(txt.message);
		 }
	}
	
	//重新上传图片
	function unSetFace(){
		var defaultpic = "{$mid|getUserFace=b}"
		$('input[name="Filedata"]').show();
		
		if($("#photo").html()!=''){
	 		imgrs.setOptions({ remove:true });
	 		imgrs.update();
		}
		document.getElementById("uploadpic").reset()
	 	$("#photo").html("");
		$("input[name=picurl]").attr('value','');
	 	$("#photo_big").attr('src',defaultpic);
	 	$('#photo_big').attr('style','position: relative;');
	}	
	
	function set_UP_W_H(w,h){
		up_pic_width = w;
		up_pic_height = h;
	}	
		
	function onSelectEnd(img,selection){
	    $('input[name=x1]').val(selection.x1);
	    $('input[name=y1]').val(selection.y1);
	    $('input[name=x2]').val(selection.x2);
	    $('input[name=y2]').val(selection.y2); 
	    $('input[name=w]').val(selection.width); 
	    $('input[name=h]').val(selection.height); 
	}
		
	function preview(img, selection) {
		onSelectEnd(img,selection);
		var big_scaleX = 150 / (selection.width || 1);
	    var big_scaleY = 150 / (selection.height || 1);
		
	    $('#photo_big').css({
	        width: Math.round(big_scaleX * up_pic_width) + 'px',
	        height: Math.round(big_scaleY * up_pic_height) + 'px',
	        marginLeft: '-' + Math.round(big_scaleX * selection.x1) + 'px',
	        marginTop: '-' + Math.round(big_scaleY * selection.y1) + 'px'
	    });
	}		
	
	//切换操作模块
	function changeModel( type ){
		var t = type || 'base';
		$('.setFold').removeClass('setUnfold');
		$('.setItemsInfo').hide();
		var handle = $('div[rel="'+t+'"]');
		handle.addClass('setUnfold');
		handle.next('.setItemsInfo').show();
	}
	
	function addprofile(txt){
		var html='';
		if(txt.boolen=="1"){
			txt = txt.data;
			if (txt.addtype == 'education') {
				html= '<li id="pro_'+txt.id+'"><div class="projectlist">' 
					+ '<h3><a href="javascript:profile_del('+txt.id+');" class="right"><span class="del"> &nbsp;</span></a>' 
					+ '[教育]'+ txt.school
					+ '<p>'+ txt.year +'入学 - ' +txt.classes+ '</p></div></li>';
			}else if( txt.addtype == 'career' ){
				html= '<li><div id="div_action_702" class="projectlist">' 
					+ '<h3><a href="javascript:profile_del('+txt.id+');" class="right"><span class="del"> &nbsp;</span></a>' 
					+ '[公司/机构]'+ txt.company
					+ '</h3><p>'+ txt.begintime +' 至 '+ txt.endtime + '<BR>'+ txt.position +'</p></div></li>';
			}
			$('#profileList').append( html );
		}else{
			 ui.error( txt.message );
		}
	}
	
	function profile_del(id){
		$.post('{:U("home/account/delprofile")}',{id:id},function(txt){
			if(txt){
				$("#pro_"+id).remove();
			}else{
				alert( '删除失败' );
			}
		});
	}
</script> 

<script>
	//个人标签部分
	$(document).ready(function(){
		$('#tag_list').find('li').live("mouseover", function(){
			$(this).addClass('bg');
		});
		$('#tag_list').find('li').live("mouseout", function(){
			$(this).removeClass('bg');
		});
		
	})
	
	function addTagById(tagid){
		$.post(U('home/Account/doUserTag'),{type:'addByid',tagid:tagid},function(txt){
			txt = eval("("+txt+")");
			if(txt.code=='1'){
				var url = "<php>echo U('home/User/searchtag'); </php>&k="+encodeURI(txt.data.tag_name);
				var html = '<li><a class="a1" href="'+url+'">'+txt.data.tag_name+'</a><a class="a2" onclick="deleteTag(this)" tagid="'+txt.data.user_tag_id+'" href="javascript:;"><img class="del" src="__THEME__/images/zw_img.gif" /></a></li>'
				$("#tag_list").append(html);
			}else if(txt.code=='2'){
				ui.error('每个人最多添加10个标签');
			}else if(txt.code=='3'){
				ui.error('标签不能为空');
			}else{
				ui.error('添加失败');
			}
		})
	}
	
	function doUserTag(){
		if(tagName==''){
			alert('Tag名不能为空');
			return false;
		}
		/*过滤单个标签首尾的空格开始*/
		var tagName = $("#tag_input").val();
		var arrTag = tagName.split(',');
		var newTag = '';
		for(key in arrTag){
			var newTag = newTag + arrTag[key].replace(/(^\s*)|(\s*$)/g,"") + ',';
		}
		var tagName = newTag.slice(0,-1);
		/*过滤单个标签首尾的空格结束*/
		$.post(U('home/Account/doUserTag'),{type:'addByname',tagname:tagName},function(txt){
			txt = eval("("+txt+")");
			if(txt.code=='1'){
				var html='';
				$.each(txt.data,function(i,n){
					var url = "<php>echo U('home/User/searchtag'); </php>&k="+encodeURI(n.tag_name);
					html+= '<li><a class="a1" href="'+url+'">'+n.tag_name+'</a><a class="a2" onclick="deleteTag(this)" tagid="'+n.user_tag_id+'" href="javascript:;"><img class="del" src="__THEME__/images/zw_img.gif" /></a></li>'
				});
				$('#tag_input').val('');
				$("#tag_list").append(html);
			}else if(txt.code=='2'){
				ui.error('每个人最多添加10个标签');
			}else if(txt.code=='3'){
				ui.error('标签不能为空');
			}else{
				ui.error('添加失败');
			}
			
		})
	}
	
	function deleteTag(o){
		var tagId = $(o).attr('tagid');
		
		$.post(U('home/Account/doUserTag'),{type:'deltag',tagid:tagId},function(txt){
			$(o).parent('li').fadeOut("slow",function(){
				$(this).remove();
 			}); 
		})
	}
	
</script>